import React, { Component } from 'react'
import { connect } from 'react-redux'
import { NavBar, Icon } from 'antd-mobile'
import { Route, Switch } from 'react-router-dom'
import TabList from './tabList'
import Boss from '../boss'
import Genius from '../genius'
import Chat from '../chat'
import Personal from '../personal'

class Dashboard extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedTab: 'blueTab'
    }
  }
  render() {
    const pathname = this.props.location.pathname
    const tabList = [
      {
        path: '/boss',
        text: '牛人',
        title: '牛人列表',
        icon: 'boss',
        component: Boss,
        hidden: this.props.type === 'genius'
      }, {
        path: '/genius',
        text: 'boss',
        title: 'boss列表',
        icon: 'genius',
        component: Genius,
        hidden: this.props.type === 'boss'
      }, {
        path: '/chat',
        text: '信息',
        title: '聊天记录',
        icon: 'msg',
        component: Chat,
        hidden: false
      }, {
        path: '/personal',
        text: '我',
        title: '个人中心',
        icon: 'user',
        component: Personal,
        hidden: false
      }
    ]
    return (
      <div>
        <header style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 10 }}>
          <NavBar
            mode="dark"
            leftContent="Back"
            rightContent={[
              <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
              <Icon key="1" type="ellipsis" />,
            ]}
          >{tabList.find(v => v.path === pathname) && tabList.find(v => v.path === pathname).title}</NavBar>
        </header>
        <main style={{margin:'45px 0 50px 0'}}>
          <Switch>
            {
              tabList.map(v => {
                return (
                  <Route key={v.path} path={v.path} exact component={v.component}></Route>
                )
              })
            }
          </Switch>
        </main>
        <footer style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 10 }}>
          <TabList
            data={tabList}
          ></TabList>
        </footer>

      </div>
    )
  }
}

const mapState = (state) => ({
  type: state.user.type
})

export default connect(mapState)(Dashboard)